import React, {memo,useRef,useState}  from "react";
import type {FC,ReactNode,ComponentRef} from "react";
import {Carousel} from "antd";
import classNames from "classnames";

import { shallowEqualApp, useAppSelector } from "@/store";
import {BannerWrapper,BannerLeft,BannerRight,BannerControl} from "./style";

interface IProps {
    children?:ReactNode
}

const TopBanner:FC<IProps> = ()=>{

    /**定义内部的数据 */
    const bannerRef = useRef<ComponentRef<typeof Carousel>>(null);
    const [currentIndex,setCurrentIndex] = useState(0);

    /**获取store的数据 */
    const {banners} = useAppSelector((state)=>{
        return {
            banners:state.recommand.banners
        }
    },shallowEqualApp);

    /**事件处理函数 */
    function handlePrevClick(){
        // console.log(bannerRef);
        bannerRef.current?.prev();
    };
    function handleNextClick(){
        bannerRef.current?.next();
    };
    function handleAfterChange(current:number){
        // console.log(current);
        setCurrentIndex(current);
    };
    function handleBeforeChange(from:number,to:number){
        currentIndex && setCurrentIndex(-1);
    }

    /**获取背景图片 */
    let backImageUrl;
    if(currentIndex >= 0 && banners.length > 0){
        backImageUrl = banners[currentIndex].imageUrl + "?imageView&blur=40x20";
    }
    // console.log(currentIndex,backImageUrl);

    return (
        <BannerWrapper style={{
            background:`url(${backImageUrl}) center center / 6000px`
        }}>
            <div className="banner wrap-v2">
                <BannerLeft>
                    <Carousel
                        autoplay
                        autoplaySpeed={3000}
                        ref={bannerRef}
                        effect="fade"
                        dots={false}
                        afterChange={handleAfterChange}
                        beforeChange={handleBeforeChange}
                    >
                        {banners.map((item) => {
                        return (
                            <div className="banner-item" key={item.imageUrl}>
                            <img
                                className="image"
                                src={item.imageUrl}
                                alt={item.typeTitle}
                            />
                            </div>
                        )
                        })}
                    </Carousel>
                    <ul className="dots">
                        {
                            banners.map((item,index)=>{
                                return (
                                    <li key={item.imageUrl}>
                                        <span className={classNames("item",{
                                                active : index === currentIndex
                                            })} ></span>
                                    </li>
                                )
                            })
                        }
                    </ul>
                </BannerLeft>
                <BannerRight></BannerRight>
                <BannerControl>
                    <button className="btn left" onClick={handlePrevClick}></button>
                    <button className="btn right" onClick={handleNextClick}></button>
                </BannerControl>
            </div>
        </BannerWrapper>
    )
}

export default memo(TopBanner);
